<script setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import ChartContainer from '../ChartContainer.vue';

const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
    axisLine: {
      lineStyle: {
        color: '#3498db'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '销售额 (万元)',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#3498db'
      }
    }
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [150, 230, 224, 218, 135, 147, 260],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }
  ]
});
</script>

<template>
  <ChartContainer title="月度销售额柱状图" :option="option" />
</template>